<template>
  <div class="f-mini no-warp-ellipsis">
    <span>ID：{{ questionnaire.id }}</span>
    <span class="m-l-14" :class="releaseState.icon">
      <i :class="releaseState.icon"></i>{{ releaseState.cn }}
    </span>
    <span class="m-l-14" v-if="questionnaire.released">邀请码：{{ questionnaire.key }}</span>
    <span class="m-l-14" v-if="questionnaire.released">答卷：{{ questionnaire.replyCount }}</span>
    <timeago class="m-l-14" :date-time="questionnaire.created_at"
             enable-type="realTime" :time-format="['date', 'time']"/>
  </div>
</template>

<script>
export default {
  name: 'QuestionnairesListItemInfo', // 问卷列表上每一项的数据
  props: {
    questionnaire: { // 问卷数据
      type: Object,
      required: true,
    },
  },
  computed: {
    // 发布状态
    releaseState() {
      return this.questionnaire.released
        ? { icon: 'released-icon', cn: '已发布' }
        : { icon: 'unreleased-icon', cn: '未发布' };
    },
  },
};
</script>

<style lang="scss">
.released-icon, .unreleased-icon {
  .released-icon { color: #0095ff; }
  .unreleased-icon { color: #7a7a7a; }

  i.released-icon, i.unreleased-icon {
    display: inline-block;
    border-radius: 4px;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    position: relative;
    top: -1px;

    &.released-icon { background-color: #0095ff; }
    &.unreleased-icon { background-color: #bfbfbf; }
  }
}
</style>
